<template>
  <div>
    <!-- <div class="title">设备配置信息</div> -->
    <div>
      <div class="title">网口信息</div>
      <div class="flex">
        <q-input v-model="form.collect_ip"
                 dense
                 emit-value
                 map-options
                 readonly
                 style="width: 280px"
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span class="text-red">*</span> <span>IP地址:</span>
            </label>
          </template>
        </q-input>
        <q-input v-model="form.collect_port"
                 dense
                 emit-value
                 map-options
                 style="width: 280px"
                 readonly
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span class="text-red">*</span> <span>设备端口:</span>
            </label>
          </template>
        </q-input>
      </div>
      <div class="flex">
        <q-input v-model="form.collect_cycle"
                 readonly
                 dense
                 emit-value
                 map-options
                 style="width: 280px"
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span class="text-red">*</span> <span>采集周期(ms):</span>
            </label>
          </template>
        </q-input>

        <!-- <q-input v-model="form.collect_interval"
                 dense
                 emit-value
                 map-options
                 style="width: 280px"
                 readonly
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span class="text-red">*</span> <span>采集间隔:</span>
            </label>
          </template>
        </q-input> -->
      </div>
      <div class="title">文件传输配置</div>
      <div class="flex">
        <q-input v-model="form.file_ip"
                 dense
                 emit-value
                 map-options
                 readonly
                 style="width: 280px"
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span class="text-red">*</span> <span>传输地址:</span>
            </label>
          </template>
        </q-input>
        <q-input v-model="form.file_port"
                 dense
                 emit-value
                 map-options
                 style="width: 280px"
                 readonly
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span class="text-red">*</span> <span>传输端口:</span>
            </label>
          </template>
        </q-input>
      </div>
      <div class="flex">
        <q-input v-model="fileProtocolName"
                 dense
                 emit-value
                 map-options
                 readonly
                 style="width: 280px"
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span class="text-red">*</span> <span>传输协议:</span>
            </label>
          </template>
        </q-input>
        <q-input v-model="form.file_username"
                 dense
                 emit-value
                 map-options
                 style="width: 280px"
                 readonly
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span>用户名:</span>
            </label>
          </template>
        </q-input>
      </div>
      <div class="flex">
        <q-input v-model="form.file_password"
                 dense
                 emit-value
                 map-options
                 style="width: 280px"
                 readonly
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span>密码:</span>
            </label>
          </template>
        </q-input>
      </div>
      <div class="title">在线加工配置</div>
      <div class="flex">
        <q-input v-model="form.dnc_port"
                 dense
                 emit-value
                 map-options
                 readonly
                 style="width: 280px"
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span class="text-red">*</span> <span>采集端口:</span>
            </label>
          </template>
        </q-input>
        <q-input v-model="dncProtocolName"
                 dense
                 emit-value
                 map-options
                 style="width: 280px"
                 readonly
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span class="text-red">*</span> <span>传输协议:</span>
            </label>
          </template>
        </q-input>
      </div>
      <div class="flex">
        <q-input v-model="form.dnc_username"
                 dense
                 emit-value
                 map-options
                 readonly
                 style="width: 280px"
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span>用户名:</span>
            </label>
          </template>
        </q-input>
        <q-input v-model="form.dnc_password"
                 dense
                 emit-value
                 map-options
                 style="width: 280px"
                 readonly
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span>密码:</span>
            </label>
          </template>
        </q-input>
      </div>
      <div class="title">根目录设置</div>
      <div class="row">
        <q-input v-model="form.file_dev"
                 dense
                 emit-value
                 map-options
                 readonly
                 style="width: 280px"
                 :rules="[]"
                 outlined>
          <template v-slot:before>
            <label class="text-right name label-width">
              <span class="text-red">*</span> <span>传输根目录:</span>
            </label>
          </template>
        </q-input>
      </div>

    </div>
  </div>
</template>

<script>
const fileMap = {
  0: 'FTP客户端',
  // 1: 'FTP服务器端',
  2: 'Samba客户端',
  // 3: 'Samba服务器端',
  4: 'SSH客户端',
  11: '厂家私有协议'
}
const dncMap = {
  0: 'FTP客户端',
  1: 'FTP服务器端',
  2: 'Samba客户端',
  3: 'Samba服务器端',
  4: 'SSH客户端',
  11: '厂家私有协议'
}
export default {
  name: 'network-port-config',
  props: {
    configForm: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      fileMap,
      dncMap,
      form: {
        collect_ip: '',
        dnc_port: '',
        collect_cycle: '',
        collect_interval: '',
        file_ip: '',
        file_port: '',
        file_protocol: null,
        file_username: '',
        file_password: '',
        dnc_protocol: null,
        dnc_username: '',
        dnc_password: '',
        file_dev: ''
      }
    }
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    fileProtocolName () {
      return this.fileMap[this.form.file_protocol] || ''
    },
    dncProtocolName () {
      return this.dncMap[this.form.dnc_protocol] || ''
    }
  },
  watch: {
    configForm: {
      deep: true,
      immediate: true,
      handler: function (val) {
        if (val) {
          this.form = val
        }
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.label-width
  width 120px
.title
  font-weight 500
  font-size 16px
  color $primary
  margin-bottom 20px
</style>
